<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="/js/ajaxfileupload.js"></script>
    <style>
        #test,#test1{min-height:250px;overflow-y:auto;max-height:300px;}
        #main-nav {
            margin-left: 1px;
        }
        #main-nav.nav-tabs.nav-stacked > li > a {
            padding: 10px 8px;
            font-size: 12px;
            font-weight: 600;
            color: #4A515B;
            background: #E9E9E9;
            background: -moz-linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAFAFA), color-stop(100%,#E9E9E9));
            background: -webkit-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
            background: -o-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
            background: -ms-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
            background: linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9');
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9')";
            border: 1px solid #D5D5D5;
            border-radius: 4px;
        }
        #main-nav.nav-tabs.nav-stacked > li > a > span {
            color: #4A515B;
        }
        #main-nav.nav-tabs.nav-stacked > li.active > a, #main-nav.nav-tabs.nav-stacked > li > a:hover {
            color: #FFF;
            background: #3C4049;
            background: -moz-linear-gradient(top, #4A515B 0%, #3C4049 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4A515B), color-stop(100%,#3C4049));
            background: -webkit-linear-gradient(top, #4A515B 0%,#3C4049 100%);
            background: -o-linear-gradient(top, #4A515B 0%,#3C4049 100%);
            background: -ms-linear-gradient(top, #4A515B 0%,#3C4049 100%);
            background: linear-gradient(top, #4A515B 0%,#3C4049 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A515B', endColorstr='#3C4049');
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A515B', endColorstr='#3C4049')";
            border-color: #2B2E33;
        }
        #main-nav.nav-tabs.nav-stacked > li.active > a, #main-nav.nav-tabs.nav-stacked > li > a:hover > span {
            color: #FFF;
        }
        #main-nav.nav-tabs.nav-stacked > li {
            margin-bottom: 4px;
        }
        /*定义二级菜单样式*/
        .secondmenu a {
            font-size: 10px;
            color: #4A515B;
            text-align: center;
        }
        .navbar-static-top {
            background-color: #212121;
            margin-bottom: 5px;
        }
        .navbar-brand {
            background: url('') no-repeat 10px 8px;
            display: inline-block;
            vertical-align: middle;
            padding-left: 50px;
            color: #fff;
        }

        .table_box_big{overflow-x: scroll;overflow-y: hidden;position: relative;height:400px;}
        .table_box{overflow: hidden;position: absolute;}
        .table_tbody_box{height: 350px;overflow: scroll;}
        table{border: 1px solid #eeeeee;}
        table thead tr th{width: 70px;height: 50px;border-right: 1px solid #eeeeee;text-align: center;word-break: keep-all;padding: 2px 10px;}
        table tbody tr td{width: 70px;height: 40px;border-right: 1px solid #eeeeee;text-align: center;border-bottom: 1px solid #eeeeee;word-break: keep-all;padding: 2px 10px;}
    </style>
    <title>实例预处理</title>
</head>
<body>
<div  id="app" class="container">

    <!--第一行 系统logo-->
    <div class="row clearfix">
        <div class="col-md-4 column">
        </div>
        <div class="col-md-4 column">
            <h1>医疗数据挖掘平台</h1>
        </div>
        <div class="col-md-4 column">
        </div>
    </div>
    <br/>

    <div class="row clearfix">
        <!--左侧菜单-->
        <div id="tree" class="col-md-2 column">
            <!--左侧树形菜单-->
            <ul id="main-nav" class="nav nav-tabs nav-stacked" style="">
                <li class="active">
                    <a href="#">
                        <i class="glyphicon glyphicon-th-large"></i>
                        首页
                    </a>
                </li>

                <li>
                    <a href="#" @click="input_file()">
                        <i class="glyphicon glyphicon-credit-card"></i>
                        导入数据
                    </a>
                </li>

                <li >
                    <a href="#systemSetting" class="nav-header collapsed" data-toggle="collapse">
                        <i class="glyphicon glyphicon-cog"></i>
                        数据预处理
                        <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul id="systemSetting" class="nav nav-list collapse secondmenu" style="height: 0px;">
                        <li><a href="#" @click="attribute_gen()"><i class="glyphicon glyphicon-user" ></i>属性预处理</a></li>
                        <li><a href="#" @click="instance_gen()"><i class="glyphicon glyphicon-th-list"></i>实例预处理</a></li>
                    </ul>
                </li>

                <li >
                    <a href="#classify" class="nav-header collapsed" data-toggle="collapse">
                        <i class="glyphicon glyphicon-cog"></i>
                        分类分析
                        <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul id="classify" class="nav nav-list collapse secondmenu" style="height: 0px;">
                        <li><a href="#" @click="linerRegression_gen()"><i class="glyphicon glyphicon-user" ></i>决策树算法/J48</a></li>
                        <li><a href="#" @click="randomForest_gen()"><i class="glyphicon glyphicon-th-list"></i>线性回归/M5P</a></li>
                    </ul>
                </li>
                <li>
                    <a href="./grid.html">
                        <i class="glyphicon glyphicon-globe"></i>
                        回归分析
                    </a>
                </li>
                <li>
                    <a href="./charts.html">
                        <i class="glyphicon glyphicon-calendar"></i>
                        关联规则分析
                    </a>
                </li>
                <li>
                    <a  @click="ik_par()">
                        <i class="glyphicon glyphicon-calendar"></i>
                        文本分词
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="glyphicon glyphicon-fire"></i>
                        关于系统
                    </a>
                </li>
            </ul>
        </div>
        <!--右侧内容显示模块-->
        <div class="col-md-10 column">
            <!过滤器操作栏-->
            <div class="row clearfix">
                <div class="col-md-1 column">
                </div>
                <div class="col-md-1 column">
                    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">
                        选择过滤器
                    </button>
                </div>
                <!-- 模态框（Modal） -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    &times;
                                </button>
                                <h4 class="modal-title" id="myModalLabel">
                                    实例处理
                                </h4>
                            </div>
                            <div class="modal-body">
                                <!--核心编辑区-->
                                <ul id="filters" class="nav nav-tabs nav-stacked" style="">

                                    <li >
                                        <a href="#attribute_filter" class="nav-header collapsed" data-toggle="collapse">
                                            <i class="glyphicon glyphicon-cog"></i>
                                            选择处理器
                                            <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                                        </a>
                                        <ul id="attribute_filter" class="nav nav-list collapse secondmenu" style="height: 0px;">
                                            <li><a href="#" @click="instance_filter('reservoirSample','无放回随机采样')">无放回随机采样</a></li>
                                            <li><a href="#" @click="instance_filter('randomize','随机重排实例')">随机重排实例</a></li>
                                            <li><a href="#" @click="instance_filter('removePercentage','删除实例数据')">删除缺失率大于
                                                <input id="wlmsinput"  list="wlmslist" width="45px" v-model="percentage"/>
                                                <datalist id="wlmslist">
                                                   <option>0.4</option>
                                                    <option>0.5</option>
                                                    <option>0.6</option>
                                                    <option>0.7</option>
                                                    <option>0.8</option>
                                                    <option>0.9</option>
                                                </datalist>
                                                的实例数据</a></li>
                                            <li><a href="#" @click="instance_filter('removeDuplicates','删除重复实例')">删除重复实例</a></li>

                                        </ul>
                                    </li>
                                </ul>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal" @click="choose_filter()">确定
                                </button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal -->
                </div>

                <div class="col-md-1 column">
                </div>
                <div class="col-md-3 column">
                    <input id="filePath" type="text" class="form-control"  v-model="filter_ch" style="height: 30px" readonly="true"/>
                </div>
                <div class="col-md-2 column">
                    <button type="button" class="btn btn-info" >保存数据</button>
                </div >
                <div class="col-md-4 column">
                    <button >-</button>
                    <input  value="12" style="width: 25px" readonly="true">
                    <button >+</button>
                    <label>总页数：12</label>
                </div>
            </div>
            <br><br>
            <div class="row clearfix">
             <div class="col-md-12 column">
            <!--数据显示栏-->
             <div class="table_tbody_box">
                        <table >
                            <tbody>
                            <tr>
                                <th align="left"><font color="#dc143c">&nbsp;&nbsp;编号 &nbsp; &nbsp;</font></th>
                                <th align="left"><font color="#dc143c">&nbsp;&nbsp;缺失率 &nbsp; &nbsp;</font></th>
                                <!-循环显示属性值和数据类型-->
                                <th v-for="item in attribute_list">{{item.atttribuy_name}}<br>({{item.attribute_type}})</th>
                            </tr>
                            <!--显示具体实例e数据-->
                            <tr v-for="(item ,index) in instance_list">
                                <td>{{index+1}}</td>
                                <td v-for="attribute_value in item">{{attribute_value}}</td>
                            </tr>
                            </tbody>
                        </table>
            </div>
             </div>
            </div>
            <div align="center">
                <button type="button" class="btn btn-success"  @click="Save">保存采样结果</button>
            </div>
        </div>

    </div>
</div>

<script>
    $(document).ready(function(){
        var vu=new Vue({
            el:'#app',
            data:{
                table_dataSet:"",
                attribute_list:[],
                instance_list:[],
                filter_en:'',
                filter_ch:'',
                percentage:0
            },
            mounted:function(){
                this.initialization();

            },
            methods:{

                //初始化数据
                initialization:function(){
                    var that=this;
                    var url="/fileController/edit_dataSet"
                    axios.get(url,{
                        params:{
                            page:1
                        }
                    }).then(function(response){

                        if(response.data.state==400){
                            alert(response.data.error_messaege)
                            return
                        }

                        that.table_dataSet=response.data.editTable_dataSet;
                        //拿取属性名称集合
                        that.attribute_list= that.table_dataSet.attributeName_list;
                        //拿取数据集 list
                        that.instance_list= that.table_dataSet.attributeValue_list;
                    },function(error){
                       alert(error)
                    })
                },

                //过滤器过滤请求
                choose_filter:function(){

                    var that=this;
                    console.info(that.percentage)
                    var url="/fileController/instance_filter"
                  axios.get(url,{
                      params:{
                          filter_name:that.filter_en,
                          parameter:that.percentage
                      }
                  }).then(function(response){
                      var data=response.data;
                      if(data.state==400){
                          alert(data.error_messaege)
                          return
                      }
                      //拿取属性名称集合
                      that.attribute_list=data.attributeName_list;
                      //拿取数据集 list
                      that.instance_list=data.attributeValue_list;

                  },function(error){

                  })
                },

                Save:function(){
                    var url="/fileController/save_sample"
                    var form=$("<form>");//定义一个form表单
                    form.attr("style","display:none");
                    form.attr("target","");
                    form.attr("method","post");
                    form.attr("action",url);
                    var fileInput=$("<input>");
                    fileInput.attr("type","hidden");
                    fileInput.attr("id","fileName");//设置属性的名字
                    fileInput.attr("name","fileName");//设置属性的名字
                    fileInput.attr("value","fileName");//设置属性的值
                    $("body").append(form);//将表单放置在web中
                    form.append(fileInput);
                    form.submit();//表单提交
                    //form.remove();
                    },

                //实例过滤器
                instance_filter:function(item,china){
                      this.filter_en=item
                    this.filter_ch=china
                },

                input_file:function(){
                    window.location.href="/html/input_file.html"
                },
                //属性预处理菜单
                attribute_gen:function(){
                    window.location.href="/html/attribute_gen.html"
                },

                //
                instance_gen:function(){
                    window.location.href="/html/instance_gen.html"
                },

                linerRegression_gen:function(){
                    window.location.href="/html/classify.html"
                },

                randomForest_gen:function(){
                    window.location.href="/html/mp5.html"
                },
                ik_par:function () {
                    window.location.href="/html/ik_participle.html"
                }


            },
            computed:{

            }

        })

    });

</script>

</body>
</html>